Component Wizard v1

Write your component requirements, and I'll give you the code.

Currently HTML and TailwindCSS code is generated.

Created by Berkay

F.A.Q.

Recent generations

"agenda with multiple days x axis. Listed by hours y axis. the entries should be displayd as cards "

<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">Agenda</h1>
    <div class="grid grid-cols-7 gap-4">
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Monday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">9:00 AM - Meeting</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">11:00 AM - Conference Call</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">1:00 PM - Lunch Break</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">3:00 PM - Project Update</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Tuesday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">10:00 AM - Team Meeting</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">12:00 PM - Client Review</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">2:00 PM - Training Session</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Wednesday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">9:30 AM - Workshop</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">1:30 PM - Strategy Planning</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Thursday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">11:00 AM - Design Review</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">3:00 PM - Development Sync</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Friday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">10:30 AM - Code Review</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">2:00 PM - End of Week Wrap-Up</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Saturday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">No Events</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Sunday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">No Events</div>
            </div>
        </div>
    </div>
</div>

"A cad with a save button on the top right corner, a title and a description"

<div class="flex justify-between items-center p-4 border-b">
    <h1 class="text-2xl font-bold">Your Title Here</h1>
    <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Save</button>
</div>
<div class="p-4">
    <p class="text-gray-700">Your description goes here. It provides additional information about the content.</p>
</div>

"react component for calculator app using antd "

<div class="p-4 max-w-lg mx-auto bg-white rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold mb-4 text-center">Calculator</h2>
    <div>
        <input type="text" class="w-full p-2 border border-gray-300 rounded mb-4" placeholder="0" />
    </div>
    <div class="grid grid-cols-4 gap-4">
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">7</button>
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">8</button>
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">9</button>
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">/</button>
        
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">4</button>
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">5</button>
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">6</button>
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">*</button>

        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">1</button>
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">2</button>
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">3</button>
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">-</button>
        
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">0</button>
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">.</button>
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">=</button>
        <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">+</button>
    </div>
</div>